<script setup>
import {  onBeforeMount, ref } from 'vue'
import { nanoid } from 'nanoid'

const props = defineProps({
  paramList: {
    type: Array,
    required: false,
    default: []
  }
})

const params = ref([])
onBeforeMount(() => {
  params.value = props.paramList ? props.paramList : []
})

// 向父组件传值
const emit = defineEmits(['setParams'])
const setParams = () => {
  emit('setParams', params.value)
}

// 新增参数
const addParam = (idx) => {
  if(idx === -1) {
    params.value.push({
      paramId: nanoid(21),
      paramVal: '',
      paramKey: '',
      parentId: '111111111111111111111',
      sort: (params.value.length + 1),
      sched: 2,
      subList: []
    })
  } else {
    params.value[idx].subList.push({
      paramId: nanoid(21),
      paramVal: '',
      paramKey: '',
      parentId: params.value[idx].paramId,
      sort: (params.value[idx].subList.length + 1),
      sched: 2
    })
  }
}

// 删除参数
const delParam = (index, idx) => {
  if(idx !== -1) {
    params.value[index].subList.splice(idx, 1)
  } else {
    params.value.splice(index, 1)
  }
}

// 勾选搜索
const chkSch = (idx) => {
  params.value[idx].sched = params.value[idx].sched === 1 ? 2 : 1
}
</script>

<template>
  <div class="sp-a">
    <div v-for="(group, index) in params" :key="index">
      <div class="sp-b">
        <div class="mr15"><input type="text" maxlength="5" v-model="group.sort" placeholder="排序" class="ipt1"></div>
        <div class="sp-c"><input type="text" maxlength="80" v-model="group.paramKey" placeholder="参数组名称" class="ipt"></div>
        <div class="mr15 btn-rw" @click="delParam(index, -1)"><i class="iconfont">&#xea45;</i></div>
        <div class="btn-rs" @click="addParam(index)"><i class="iconfont">&#xea80;</i></div>
      </div>
      <div class="sp-b" v-for="(param, idx) in group.subList" :key="idx">
        <div class="mr15"><input type="text" maxlength="5" v-model="param.sort" placeholder="排序" class="ipt1"></div>
        <div class="sp-c"><input type="text" maxlength="80" v-model="param.paramKey" placeholder="名称" class="ipt"></div>
        <div class="sp-c"><input type="text" maxlength="80" v-model="param.paramVal" placeholder="内容" class="ipt"></div>
        <div class="cur mr15" @click="chkSch(index)" title="开启搜索"><i :class="['iconfont', param.sched===1 ? 'chked' : 'chk']" v-html="param.sched===1 ? '&#xe685;' : '&#xe686;'" /> 搜索</div>
        <div class="btn-rw" @click="delParam(index, idx)"><i class="iconfont">&#xea45;</i></div>
      </div>
    </div>
    <div class="sp-c btn-pi" @click="addParam(-1)"><i class="iconfont">&#xea80;</i> 增加参数组</div>
  </div>
</template>

<style scoped>
.sp-a {width: 100%;}
.sp-b {width: 100%; display: flex; display: -webkit-flex; align-items: center; padding-bottom: 10px;}
.sp-c {width: 20%; margin-right: 10px;}
</style>